<template>
  <div class="achievement-container-padding">
    <div class="buttonList">
      <el-button v-if="!isEdit" type="primary" @click="edit">修改</el-button>
      <el-button v-else type="primary" @click="save">保存</el-button>
      <el-button type="danger" @click="del">删除</el-button>
    </div>
    <el-descriptions
      title=""
      direction="vertical"
      :column="details.one.length"
      size="large"
      border
    >
      <el-descriptions-item
        v-for="item in details.one"
        :key="item.label"
        :label="item.label"
        align="center"
        label-align="center"
      >
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- <el-descriptions title="项目信息：" direction="vertical" :column="details.two.length" size="large" border class="mt">
      <el-descriptions-item v-for="item in details.two" :key="item.label" :label="item.label" align="center"
        label-align="center">
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="课题信息：" direction="vertical" :column="details.three.length" size="large" border class="mt">
      <el-descriptions-item v-for="item in details.three" :key="item.label" :label="item.label" align="center"
        label-align="center">
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions> -->

    <el-descriptions
      title="其他信息："
      direction="vertical"
      :column="details.last.length"
      size="large"
      border
      class="mt"
      style="margin-bottom: 40px"
    >
      <el-descriptions-item
        v-for="item in details.last"
        :key="item.label"
        :label="item.label"
        align="center"
        label-align="center"
      >
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <div class="fotter">
      <el-form :model="formLine" class="form-inline" label-width="auto">
        <el-form-item
          v-for="item in footerDetails"
          :key="item.value"
          :label="item.label"
        >
          <el-input
            v-model="formLine[item.value]"
            :disabled="!isEdit"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { details, typeDetails } from '../table/column'
  import { useRoute } from 'vue-router'
  import { computed, reactive, nextTick } from 'vue'

  const route = useRoute()

  //   type 分为 授权专利/论文专著/标准/省部级及以上资助/国际化培养
  const type = route.query.type

  const footerDetails = computed(() => {
    return typeDetails[type]
  })

  const isEdit = ref(false)

  const edit = () => {
    console.log('edit')
    isEdit.value = true
  }
  const del = () => {
    console.log('del')
  }
  const save = () => {
    console.log('save')
    isEdit.value = false
  }

  const formLine = ref({})
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;

  .buttonList {
    display: flex;
    justify-content: end;
    padding-bottom: $margin-bottom;
    border-bottom: 1px solid #edeff2;
    margin-bottom: $margin-bottom;
  }

  .mt {
    margin-top: $margin-bottom;
  }

  .mtb {
    margin-bottom: $margin-bottom;
  }

  .fotter {
    font-size: 18px;

    div.flex + div.flex {
      margin-top: 30px;
    }
  }

  .flex {
    display: grid;
    grid-template-columns: 1fr 6fr;

    .title {
      text-align: right;
      width: auto;
    }
  }
</style>
